//指标维护

import React, {PureComponent} from "react";
import {connect} from "umi";
import {Button, Input, Table} from "antd";
import {Drawer} from "antd/es";
import Form from "antd/es/form";
import TextArea from "antd/es/input/TextArea";


class IndicatorEdit extends PureComponent {


  state = {
    drawerVisible: false,
    drawerData: {}
  }
  formRef = React.createRef();

  columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: "name",
    },
    {
      title: '打分标准',
      dataIndex: 'description',
      key: 'description'
    }, {
      title: '操作',
      key: '操作',
      render: (text, record) => {


        return <div>
          <Button onClick={() => this.edit(record)}>编辑</Button>
          <Button onClick={() => this.delete(record.indicatorId)}>删除</Button>
        </div>
      }

    }
  ];

  edit(data) {
    this.openDrawer(data);
  }

  delete(id) {
    const dispatch = this.props.dispatch;
    return dispatch({
      type: 'radarCharModel/deleteIndicator',
      payload: {id: id},
    }).then(() => {
      this.list();
    });
  }

  list = () => {
    const dispatch = this.props.dispatch;

    return dispatch({
      type: 'radarCharModel/listIndicator',
      payload: {},
    });
  }

  componentDidMount() {
    this.list();
  }

  renderForm(data) {
    if (this.formRef.current) {

      this.formRef.current.resetFields();
      this.formRef.current.setFieldsValue(data);
    } else {
      setTimeout(() => {
        this.renderForm(data)
      }, 100);
    }
  }

  openDrawer(data) {
    this.renderForm(data);

    this.setState({drawerVisible: true});
  }

  onClose() {
    this.setState({drawerVisible: false})
  }

  onFinish(data) {

    const dispatch = this.props.dispatch;
    dispatch({
      type: 'radarCharModel/saveIndicator',
      payload: data,
    }).then(() => {
      this.list();
    });
  }

  render() {

    return <div>
      <Drawer
        title={this.state.drawerData.indicatorId ? "编辑指标" : "新增指标"}
        placement="right"
        closable={false}
        width={"60%"}
        onClose={() => {
          this.onClose()
        }}
        visible={this.state.drawerVisible}
        footer={
          <div
            style={{
              textAlign: 'right',
            }}
          >
            <Button onClick={()=>{this.onClose()}} style={{marginRight: 8}}>
              Cancel
            </Button>
            <Button onClick={() => {
              this.onClose();
              this.formRef.current.submit();
            }} type="primary">
              Submit
            </Button>
          </div>
        }
      >
        <Form ref={this.formRef} name="control-hooks" onFinish={(data) => this.onFinish(data)}>
          <Form.Item name="indicatorId">
            <Input type={"hidden"}/>
          </Form.Item>
          <Form.Item name="name" rules={[{required: true}]} label={"指标名称"}>
            <Input type={"text"}/>
          </Form.Item>
          <Form.Item name="description" rules={[{required: true}]} label={"打分标准"}>
            <TextArea rows={20}></TextArea>
          </Form.Item>
        </Form>

      </Drawer>
      <Button onClick={() => this.openDrawer({})}>新增指标</Button>
      <Table dataSource={this.props.radarCharModel.indicator} columns={this.columns}></Table>
    </div>;
  }
}

export default connect(({radarCharModel, loading}) => ({
  radarCharModel: radarCharModel,
}))(IndicatorEdit);
